import React, { Component } from "react";
import PubSub from "pubsub-js";
// import axios from "axios";

export default class index extends Component {
  search = async () => {
    const {
      keyWordElement: { value: keyWord },
    } = this;
    PubSub.publish("atguigu", { isFirst: false, isLoading: true });
    // axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
    //   res => {
    //     PubSub.publish("atguigu", { isFirst: false, isLoading: false, users: res.data.items });
    //   },
    //   err => {
    //     PubSub.publish("atguigu", { isLoading: false, err: err.message });
    //   }
    // );
    try {
      const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`);
      const data = await response.json();
      PubSub.publish("atguigu", { isFirst: false, isLoading: false, users: data.items });
    } catch (err) {
      PubSub.publish("atguigu", { isLoading: false, err: err.message });
    }
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => (this.keyWordElement = c)} type="text" placeholder="输入关键词点击搜索" />
          &nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    );
  }
}
